<!DOCTYPE html>
<html class="x-admin-sm" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
  <meta charset="UTF-8">
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <link rel="stylesheet" href="/xadmin/css/font.css">
  <link rel="stylesheet" href="/xadmin/css/xadmin.css">
  <script src="/xadmin/lib/layui/layui.js" charset="utf-8"></script>
  <script type="text/javascript" src="/xadmin/js/xadmin.js"></script>
  <style>
    .layui-icon-add-1 {
      color: red;
    }
  </style>
</head>
<body>
<div class="x-nav">
          <span class="layui-breadcrumb">
            <a href="">首页</a>
            <a href="">演示</a>
            <a>
              <cite>导航元素</cite></a>
          </span>
  <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right"
     onclick="location.reload()" title="刷新">
    <i class="layui-icon layui-icon-refresh" style="line-height:30px"></i></a>
</div>
<div class="layui-fluid">
  <div class="layui-row layui-col-space15">
    <div class="layui-col-md12">
      <div class="layui-card">
        <div class="layui-card-body ">
          <div class="layui-form layui-col-space5">
            <div class="layui-inline" style="font-size: 16px;">
              <select placeholder="请选择归属系统" autocomplete="off" lay-search id="select-system">
                <option value="">请选择归属系统</option>
                <option th:each="item:${systemList}" th:value="${item.systemCode}"
                        th:text="${item.systemCode+'--'+item.systemName}">
                </option>
              </select>
            </div>
            <div class="layui-inline layui-show-xs-block">
              <button class="layui-btn" id="btn-query"><i
                  class="layui-icon">&#xe615;</i></button>
            </div>
          </div>
        </div>

        <div class="layui-card-body layui-table-body layui-table-main">
          <div id="content" style="min-width: 800px;display: block;">
            <div style="border: 1px solid red;width: 30%;float: left;font-size: 16px;">
              <div id="mytree"></div>
            </div>
            <div
                style="float: right;width: 65%;padding:10px 15px 0 20px;font-size: 16px;">
              <form class="layui-form">
                <div class="layui-form-item">
                  <div class="layui-inline">
                    <label class="layui-form-label">菜单ID</label>
                    <div class="layui-input-inline">
                      <input type="number" id="f-id" disabled name="id" autocomplete="off"
                             placeholder="自动生成"
                             class="layui-input" style="background-color: #eeeeee">
                    </div>
                  </div>
                  <div class="layui-inline">
                    <label class="layui-form-label">上级菜单ID</label>
                    <div class="layui-input-inline">
                      <input type="text" name="menuName" id="f-parentId" lay-verify="required"
                             autocomplete="off" disabled class="layui-input"
                             style="background-color: #eeeeee">
                    </div>
                  </div>
                </div>
                <div class="layui-form-item">
                  <div class="layui-inline">
                    <label class="layui-form-label">菜单名称</label>
                    <div class="layui-input-inline">
                      <input type="text" name="menuName" id="f-menuName" lay-verify="required"
                             autocomplete="off" class="layui-input">
                    </div>
                  </div>
                  <div class="layui-inline">
                    <label class="layui-form-label">归属系统</label>
                    <div class="layui-input-inline">
                      <input type="text" id="f-systemCode" name="id" autocomplete="off"
                             class="layui-input" disabled style="background-color: #eeeeee">
                    </div>
                  </div>
                </div>

                <div class="layui-form-item">
                  <label class="layui-form-label">菜单URL</label>
                  <div class="layui-input-block">
                    <input type="text" id="f-url" name="url" required lay-verify="required"
                           placeholder="请输入URL" autocomplete="off" class="layui-input">
                  </div>
                </div>
                <div class="layui-form-item">
                  <label class="layui-form-label">菜单图标</label>
                  <div class="layui-input-block">
                    <input type="text" id="f-icon" name="icon" required
                           autocomplete="off" class="layui-input">
                  </div>
                </div>

                <div class="layui-form-item">
                  <label class="layui-form-label">排序</label>
                  <div class="layui-input-inline" style="width: 120px;">
                    <input type="number" id="f-menuSort" name="menuSort" required
                           lay-verify="required"
                           placeholder="请输入排序" autocomplete="off" class="layui-input">
                  </div>
                  <div class="layui-form-mid layui-word-aux">按升序排列</div>
                </div>

                <div class="layui-form-item">
                  <label class="layui-form-label">是否有效</label>
                  <div class="layui-input-block">
                    <input type="radio" id="f-status1" name="status" value="1" title="有效">
                    <input type="radio" id="f-status0" name="status" value="0" title="无效">
                  </div>
                </div>

                <div class="layui-form-item">
                  <div class="layui-input-block">
                    <button type="submit" class="layui-btn" lay-submit="" lay-filter="fSubmit">立即提交
                    </button>
                  </div>
                </div>
              </form>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<script>
  var systemCode
  layui.use(['tree', 'layer', 'jquery', 'form'], function () {
    var tree = layui.tree;
    var layer = layui.layer;
    var $ = layui.jquery;
    var form = layui.form;
    var loading;
    var pid;
    $('#btn-query').click(function () {
      systemCode = $('#select-system').val()
      if (systemCode == '') {
        layer.msg('请选择系统！')
        return;
      }
      $('#content').show()
      loading = layer.load(1, {
        time: 10 * 1000
      });
      $.ajax({
        url: '/user/orderListFind',
        data: {'systemCode': systemCode},
        success(data) {
          layer.close(loading);
          if (data == null) {
            layer.msg('无菜单返回')
          }
          //渲染
          tree.render({
            elem: '#mytree'  //绑定元素
            , edit: ['add', 'del']
            , data: composeTree(data.data)
            , id: 'id' //定义索引
            , click: function (obj) {
              // console.log(obj.data); //得到当前点击的节点数据
              // console.log(obj.state); //得到当前节点的展开状态：open、close、normal
              // console.log(obj.elem); //得到当前节点元素
              // console.log(obj.data.children); //当前节点下是否有子节点
              var tpid = obj.data.id

              $('#f-id').val(tpid)
              if (tpid == null) {
                tpid = pid
                layer.msg('将新增菜单')
              } else {
                pid = tpid
                tpid = obj.data.parentId
              }
              $('#f-parentId').val(tpid)
              $('#f-menuName').val(obj.data.menuName)
              $('#f-systemCode').val(systemCode)
              $('#f-url').val(obj.data.url)
              $('#f-icon').val(obj.data.icon)
              $('#f-menuSort').val(obj.data.menuSort)
              if (obj.data.status == 1) {
                $('#f-status1').prop("checked", "checked");
              } else {
                $('#f-status0').prop("checked", "checked");
              }
              form.render()//重新渲染表单
            }
          });
        }
      })
    })

    //监听提交
    form.on('submit(fSubmit)', function (data) {
      layer.msg(JSON.stringify(data.field));
      return false;
    });

  })

  // 数组转tree
  function composeTree(list = []) {
    const data = JSON.parse(JSON.stringify(list)) // 浅拷贝不改变源数据
    const result = []
    if (!Array.isArray(data)) {
      return result
    }
    const map = {}
    data.forEach(item => {
      map[item.id] = item
    })
    data.forEach(item => {
      item.title = item.menuName
      const parent = map[item.parentId]
      if (parent) {
        (parent.children || (parent.children = [])).push(item)
      } else {
        result.push(item)
      }
    })
    return result
  }

</script>
</body>
</html>
